<script lang="ts" setup>
import { baomingIndex, baomingShanchu } from "@/api";
import { useUserStore } from "@/stores/UserStore";
import { ref, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";

// 报名要提交的参数
const useuserstore = useUserStore();

const kechenList = ref();
const baomingshow = ref(false);
onMounted(async () => {
  huiyuanbaoming();
});
console.log(kechenList.value);

const huiyuanbaoming = async () => {
  // 发起会员报名课程请求
  await baomingIndex({
    huiyuanid: useuserstore.VipUser[0].id,
  }).then((res) => {
    // console.log(res.data);
    kechenList.value = res.data;
  });
};

const tuikeID = ref("");
const handleEdit = (item) => {
  baomingshow.value = true;
  tuikeID.value = item.id;
};

// 点击确认退课
const handleConfirm = async () => {
  // 在这里发起请求，把课程删除，需要报名的id
  const res = await baomingShanchu({ id: tuikeID.value });
  // console.log(res.code);
  if (res.code === 200) {
    ElMessage.success(res.data);
    huiyuanbaoming();
  } else {
    ElMessage.warning(res.data);
  }
  baomingshow.value = false;
};
</script>

<template>
  我的课程
  <el-table :data="kechenList" style="width: 100%; margin-top: 15px" border>
    <el-table-column prop="kcid" label="序号" width="180" />
    <el-table-column prop="kcname" label="名称" width="180" />
    <el-table-column prop="time" label="时长" width="180" />
    <el-table-column prop="jiaolian" label="教练" width="180" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="danger" @click="handleEdit(scope.row)">
          退课
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="baomingshow" title="课程取消" width="500" align-center>
    <span>是否确定取消该课程？</span>
    <template #footer>
      <el-button @click="baomingshow = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<style scoped></style>
